<template>
	<view class="user-enterprise-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="关联企业"></CustomNav>
		<view class="user-info-block block" :style="'margin-top:'+mt">
			<view class="user-photo-block">
				<image :src="user.avatar" class="user-photo"></image>
			</view>
			<view class="user-name">{{user.name||'微信用户'}}</view>
		</view>
		<view v-if="audit!=null" class="tips-block block" :class="tipsClass">
			<view class="iconfont icon-tishi"></view>{{tipsText}}
		</view>
		<view class="form-block block">
			<view class="form-item">
				<view class="form-label">企业全称</view>
				<input placeholder-class="input-placeholder" v-model="form.name" maxlength="30" placeholder="请填写企业名称" class="form-ctrl"/>
			</view>
			<view class="form-item">
				<view class="form-label">职务</view>
				<input placeholder-class="input-placeholder" v-model="form.position" maxlength="10" placeholder="请填写您的职务" class="form-ctrl"/>
			</view>
			<view class="form-item upload">
				<view class="form-label">营业执照</view>
				<view class="upload-block">
					<view v-if="form.business_license.length>0" @click="viewImage" class="item">
						<image class="photo" :src="form.business_license" mode="aspectFill"></image>
						<view @click.stop="deleteImage" class="iconfont delete icon-empty"></view>
					</view>
					<view @click="chooseImage" v-else class="upload-btn item"></view>
				</view>
			</view>
		</view>
		<view v-if="audit==null||audit==2" class="btn normal" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		getUserAssociation,
		saveUserAssociation
	} from '@/api/user.js';
	import {uploadFile} from '@/api/file.js'
	import {
		validate
	} from '@/util/validate.js';
	export default {
		data() {
			return {
				audit:null,
				remark:'',
				topBgColor: 'rgba(0,0,0,0)',
				form: {
					name: '',
					position: '',
					business_license: '',
				},
				rule: {
					name: {
						name: '企业名称',
						required: true
					},
					position: {
						name: '职务',
						required: true
					},
					business_license: {
						name: '营业执照',
						required: true
					},
				},

				user: null,
			}
		},
		computed: {
			tipsClass(){
				switch(this.audit){
					case 0:
						return 'audit';
					case 1:
						return '';
					case 2:
						return 'warning'
				}
				return '';
			},
			tipsText(){
				switch(this.audit){
					case 0:
						return '您的信息正在审核中';
					case 1:
						return '您的企业关联成功';
					case 2:
						return '审核未通过：'+this.remark;
				}
				return '';
			}
		},
		methods: {
			deleteImage(){
				uni.showModal({
					title:'提示',
					content:'确定删除吗',
					success: (e) => {
						if(e.confirm){
							this.form.business_license='';
						}
					}
				})
			},
			viewImage(){
				uni.previewImage({
					current:this.form.business_license,
					urls:[this.form.business_license]
				})
			},
			chooseImage(){
				uni.chooseMedia({
					count:1,
					mediaType:['image'],
					sizeType:['compressed'],
					success:(res)=>{
						uploadFile(res.tempFiles[0].tempFilePath).then(url=>{
							this.form.business_license=url;
						})
					}
				})
			},
			submit() {
				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '保存中',
						mask: true,
					})
					saveUserAssociation(this.form).then(() => {
						this.showToast('保存成功',()=>{
							this.back()
						});
					})
				}
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserAssociation().then(res => {
					if(res){
						Object.keys(this.form).forEach(item=>{
							this.form[item]=res[item]
						})
						this.audit=res.audit;
						this.remark=res.remark||''
					}
				})
			}
		},
		onLoad() {
			this.user = this.$store.getters.user
			this.getDetail();
		}
	}
</script>

<style lang="scss" scoped>
	.user-enterprise-page {
		overflow: hidden;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}

		.user-info-block {
			margin: 0 auto;
			display: flex;
			align-items: center;

			.user-photo-block {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;

				.user-photo {
					width: 100%;
					height: 100%;
				}
			}

			.user-name {
				font-weight: bold;
				margin-left: 20rpx;
				width: calc(100% - 160rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: flex;
			}
		}
		
		.tips-block{
			margin: 0 auto;
			border-radius: 14px;
			background:#dfffe7;
			display: flex;
			padding: 40rpx 30rpx;
			color: #0e952e;
			font-size: 30rpx;
			margin-top: 30rpx;
			.iconfont{
				margin-right: 10rpx;
				font-size: 44rpx;
			}
		}
		.tips-block.warning{
			background:#ffdfe2;
			color: #e03b2e;
		}
		.tips-block.audit{
			background:#fff0d6;
			color: #e59f19;
		}

		.form-block {
			margin: 30rpx auto;
			padding: 30rpx;
			background: #fff;
			border-radius: 14px;
			.form-item{
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #efefef;
				.form-label{
					width: 140rpx;
					.require{
						color: red;
					}
					.no-require{
						color: #fff;
					}
				}
				.form-ctrl{
					width: calc(100% - 160rpx);
					margin-left: 20rpx;
				}
			}
			.form-item:last-child{
				border:none;
			}
			.form-item.upload{
				height: auto;
				min-height: 100rpx;
				flex-wrap: wrap;
				align-items: flex-start;
				.form-label{
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
				}
				.upload-block{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 30rpx;
					.upload-btn{
						background:#f5f6f8 url('@/static/image/upload.png') no-repeat center;
						background-size: auto 50%;
						
					}
					.item{
						border-radius: 12rpx;
						width: calc(50% - 10rpx);
						margin-right: 20rpx;
						height: 200rpx;
						margin-bottom: 20rpx;
						position: relative;
						.photo{
							border-radius: 12rpx;
							width: 100%;
							height: 100%;
						}
						.iconfont{
							position: absolute;
							right: 5px;
							top: 5px;
							color: #fff;
							font-size: 40rpx;
							text-shadow: 0 0 1px #000;
						}
					}
				}
			}
		}

		.btn {
			margin: 30rpx auto;
		}
	}
</style>